<template>
<div id="container">
  <el-row>
  <el-col style="display: flex;flex-wrap: wrap;justify-content: space-between;">
    <div  style="margin: 20px 100px 0px;">
    <el-input
      :rows="2"
      placeholder="科室编号"
      v-model="kcode"
      :disabled="true">
    </el-input>
    </div>
    <div  id='move' style="margin: 20px 100px 0px;">
      <el-select v-model="kname" placeholder="请选择领用科室">
        <el-option
          v-for="item in keshiList"
          :key="item.value"
          :label="item.label"
          :value="item.name">
        </el-option>
      </el-select>
    </div>
    <div  style="margin: 20px 100px 0px;">
      <el-input
        :rows="2"
        placeholder="请输入申请人"
        v-model="person">
      </el-input>
    </div>
    <div class="block" style="margin: 20px 100px 20px;">
      <el-date-picker
        v-model="time"
        type="datetime"
        placeholder="请选择日期时间">
      </el-date-picker>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="">
      <el-table :data="members" :border=true style="width: 99.99%;">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="" label="耗材编号" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hcode" autocomplete="off" size="small"
                      placeholder="请输入耗材编号"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="耗材名称" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hname" autocomplete="off" size="small" placeholder="请输入耗材名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="申请数量" width="210">
          <template slot-scope="scope">
<!--            <el-input v-model="scope.row.mobile" autocomplete="off" size="small"
                      placeholder="请输入申请数量"></el-input>-->
            <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="500" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="备注" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.des" placeholder="请输入备注">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <i class="el-icon-circle-plus-outline" @click="addmembers"></i>
    </el-form-item>
    </el-form>
  </el-col>
  </el-row>
  <div style="margin: 20px 100px">
    <el-button type="success" @click="save">保 存</el-button>
    <el-button type="primary" @click="submitForm">提 交</el-button>
  </div>
</div>
</template>

<script>
import {listKeshi} from "../../../api/system/keshi";
import {addApplydan} from "../../../api/system/applydan";
import {addApply, addApplyList} from "../../../api/system/apply";
export default {
  name: "hcapply",
  data() {
    return {
      members:[{
        aid: '',
        hcode:'',
        hname:'',
        num:'',
        des:'',
      },
      ],
      kcode: null,
      kname: null,
      time: null,
      person:null,
      status:null,
      /*hcode:null,
      hname:null,
      num: null,
      remark: null,*/
      aid:null,
      keshiList: [{
        value: '选项1',
        label: '儿科一区'
      }, {
        value: '选项2',
        label: '肾科二区'
      }, {
        value: '选项3',
        label: '神经科'
      }, {
        value: '选项4',
        label: '外科'
      }, {
        value: '选项5',
        label: '皮肤科'
      }],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 医院耗材管理系统表格数据
      applyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        kcode:'',
        kname: '',
        person: '',
        time: '',
        status:'',
      },
      // 表单参数
      form: {

      },
      // 表单校验
      rules: {
      }
    };
  },
  created(){
    this.getkeshi();
  },
  methods:{
    getkeshi(){
      this.loading = true;
      listKeshi().then(response => {
        this.keshiList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(response.rows);
      });
    },
    // 保存按钮
    save() {
      console.log(this.kname);
      for(var i = 0; i < this.keshiList.length; i++) {
        if(this.keshiList[i].name == this.kname){
          this.kcode=this.keshiList[i].code;
        }
      }
      console.log(this.kcode+" "+this.kname+" "+this.person+" "+this.time);
      this.queryParams.kcode=this.kcode;
      this.queryParams.kname=this.kname;
      this.queryParams.person=this.person;
      this.queryParams.time=this.time;
      this.queryParams.status=this.status;
      console.log(this.queryParams);
      addApplydan(this.queryParams).then(response=>{
        alert(response);
        this.aid=response;
      })

    },
    handleChange(value) {
      console.log(value);
    },
    /** 提交按钮 */
    submitForm() {
      this.form.aid=this.aid;
      for(var i=0; i<this.members.length;i++) {
        this.members[i].aid=this.aid;
      }
      addApplyList(this.members).then(response => {
        this.$modal.msgSuccess("新增成功");
        alert("OK");
      });
    },
    addmembers() {
      var member = this.members;
      console.log(member);
      var length = member.length;
      this.members.push(
        {
          id: parseInt(length),
          name: '',
          relationship: '',
          mobile: '',
          birthday: '',
          gongzuodanwei: '',
        })
    },
    delmembers(index, row) {
      var that = this;
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        var hasmembers = that.members;
        for (var i = 0; i < hasmembers.length; i++) {
          if (row.id == hasmembers[i].id) {
            that.members.splice(i, 1);
            // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
          }
        }
      }).catch(() => {
        //点取消的提示
        return;
      });
    },
  }
}
</script>

<style scoped>
#container{
  margin:10px 200px 00px 10px;
  align: center;
}
</style>
